<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #demo {
        width: 200px;
        height: 200px;
        background-size: 100%;
        background-image: url('./imgs/logo.png');
      }

      @media screen and (-webkit-min-device-pixel-ratio: 2) {
        #demo {
          background-image: url('./imgs/logo@2x.png');
        }
      }
      @media screen and (-webkit-min-device-pixel-ratio: 3) {
        #demo {
          background-image: url('./imgs/logo@3x.png');
        }
      }
    </style>
  </head>
  <body>
    <div id="demo"></div>
    <!-- <div id="demo1"></div> -->
    <!-- <img src="./imgs/3.jpg" alt="" />
    <img src="./imgs/微信.svg" alt="" /> -->
    <script>
      /*
      为什么在移动端开发时,设计人员会将同样的图,做三张不同尺寸

      背景知识: 
        物理像素: 一块屏幕上可以发光的元器件
        屏幕的分辨率: 描述一块屏幕上有多少物理像素 750*1334(iphone6)
        css像素: 程序员写的px值
        设备独立像素(dpi): 决定了一个css像素最终被屏幕的几个物理像素渲染 375* 667(iphone6)
        像素比: 屏幕分辨率水平方向的值 / 设置独立像素水平方向的值

      图片分类: 
        位图: 是由位图像素组成,如果一个位图像素被多个物理像素渲染,就会失真(模糊)(jpg,png). 如果一个位图像素,被一个物理像素渲染,位图就不会失真
        矢量图:不会失真(svg) 
      
      */
    </script>
  </body>
</html>
